// pages/mv-detail/mv-detail.js
import {
  getMvUrl,
  getMvDetail
} from "../api/music"
const colors = [
  "#ff0000",
  "'#ff00ff",
  "#00ffff",
  "#0000ff",
  "#00ff00"
]
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: "",
    mvInfo: "",
    value: "",
    text: "",
    isConnect: false,
    danmuList: [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id);
    getMvUrl(options.id).then(res => {
      this.setData({
        url: res.data.data.url
      })

    })
    getMvDetail(options.id).then(res => {
      console.log(res);
      this.setData({
        mvInfo: res.data.data
      })
    })
    // 创建连接
    app.globalData.loginPromise.then((res) => {
      const userInfo = app.globalData.userInfo
      //   // 用户名
      //   console.log(userInfo);
      this.userName = userInfo && userInfo.loginName || ""; 
      //   // 分组id表示聊天室 group id 来区分不同的聊天室
      //分组id
      this.groupId = "web09-mv" + options.id
      this.nickname = userInfo.userName
      this.avatar = userInfo.avatar
      //   // 1.建立链接wss://showme.myhope365.com/websocketChat（上线必须） 或者 ws://59.111.104.209:13000----
      wx.connectSocket({
        url: `wss://showme.myhope365.com/websocketChat?username=${this.userName}&password=123&courseId=${this.groupId}&nickName=${this.nickname}&avatar=${this.avatar}`,
      })
    })
    // 打开连接   建立成功了
    wx.onSocketOpen((result) => {
      this.setData({
        isConnect: true
      })
      // 获取历史消息
      const historyMsg = {
        cmd: 19, // 命令 
        type: 1, // 类型 固定值
        groupId: this.groupId, //  分组的id
        userId: this.userName // 用户id（这里可以用loginName）
      }
      wx.sendSocketMessage({
        data: JSON.stringify(historyMsg),
      })
      // 做一个心跳检测，定时向服务器发送消息
      this.IntervalId = setInterval(() => {
        wx.sendSocketMessage({
          data: JSON.stringify({
            cmd: "13",
            "hbbyte": "-127"
          }),
        })
      }, 5000);
    })
    // 监听一下消息
    wx.onSocketMessage((result) => {
      const data = JSON.parse(result.data);
      if (data.command === 20 && data.code === 10018) {

        // 判断当前的聊天室是否存在历史消息
        if (data.data && data.data.groups && data.data.groups[this.groupId]) {
          // 满足这个条件之后可以设置历史消息
          this.setData({
            //  基于一个数组生成一个新的数组  用map  api  来实现  历史弹幕的显示
            danmuList: data.data.groups[this.groupId].map(item=>JSON.parse(item.content))
          })
        }
      }
      // 监听新消息的发送
      if(data.command==11){

// 字符串转回接送格式
const content=JSON.parse(data.data.content)
// 把内容加进去
// 如果想同样的视频时间下面代码
this.data.danmuList.push(content)
// 如果想实时沟通下面代码
// this.videoContext.sendDanmu(content)
this.setData({
  danmuList:this.data.danmuList
})
      }
    })
  },
  onReady() {
    this.videoContext = wx.createVideoContext('mvvideo')
  },
  onUnload() {
    // 关闭连接
    wx.closeSocket()
    clearInterval(this.IntervalId)
  },
  // 随机生成随机数colors长度
  bindSendDanmu() {
    // 发送消息
    // you   kolor   text   time
    // // 需要速记生成color长度的随机数
    const randomNum = Math.floor(Math.random() * colors.length)
    const content={
      text:this.data.value,
      color:colors[randomNum],
      // 当前博地方的时间
      time:this.currentTime==null?0:this.currentTime
    }
    const msgBody = {
      from: this.userName, // 发送人，当前用户的用户名
      createTime: new Date().getTime(), // 发送时间
      cmd: 11, // 命令固定内容
      group_id: this.groupId, // 分组id。  想要发送到哪个组里
      chatType: 1, //  聊天类型 固定内容
      msgType: 0, // 消息类型 固定内容
      content:JSON.stringify(content),// 消息内容，自己设计结构，比如你想发送图片（图片上传的接口）
      nickName: this.nickName, // 用户昵称
      avatar: this.avatar, // 用户头像
      type:"1" // 消息类型。 你可以自己设计，发送过去是什么，返回的就是什么（1: 普通文本 2: 图片 3：点赞 4， 送花）
    }
// 向服务器发送消息
wx.sendSocketMessage({
  data:JSON.stringify(msgBody)
})
// 需要速记生成color长度的随机数
    // const randomnNum = Math.floor(Math.random() * colors.length)
    // this.videoContext.sendDanmu({
    //   text: this.data.value,
    //   color: colors[randomnNum]
    // })
  

  },

     // 当前播放时间
     handelTimeUpdate(e){
      // console.log(e.detail.currentTime);
      this.currentTime=Math.floor(e.detail.currentTime)
    },
    
    
    








})